<!DOCTYPE html>
<html>
<head>
    <title>自定义形状</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.js"></script>
</head>
<body onload="init()">
<canvas id="mainCanvas" style="width: 800px;height: 600px;"></canvas>
</body>
<script>
    /* 自定义形状 */
    function init(){
        var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer({
            canvas:document.getElementById('mainCanvas')
        });
        renderer.setClearColor(0x000000);
        //OrthographicCamera()
        var camera = new THREE.OrthographicCamera(-5,5,3.75,-3.75,0.1,100);
        camera.position.set(25,25,25);
        camera.lookAt(new THREE.Vector3(0,0,0));
        scene.add(camera);

        var material = new THREE.MeshBasicMaterial({
            color: 0xffff00,
            wireframe: true
        });
        //初始化几个形状
        var geometry = new THREE.Geometry();
        /* 设置顶点位置 */
        //设置顶部四个顶点
        geometry.vertices.push(new THREE.Vector3(-1,2,-1));
        geometry.vertices.push(new THREE.Vector3(1,2,-1));
        geometry.vertices.push(new THREE.Vector3(1,2,1));
        geometry.vertices.push(new THREE.Vector3(-1,2,1));
        //设置底部四个顶点
        geometry.vertices.push(new THREE.Vector3(-2,0,-2));
        geometry.vertices.push(new THREE.Vector3(2,0,-2));
        geometry.vertices.push(new THREE.Vector3(2,0,2));
        geometry.vertices.push(new THREE.Vector3(-2,0,2));
        /* 设置顶点连接情况 */
        //顶面
        geometry.faces.push(new THREE.Face3(0, 1, 3));
        geometry.faces.push(new THREE.Face3(1, 2, 3));
        //底面
        geometry.faces.push(new THREE.Face3(4, 5, 6));
        geometry.faces.push(new THREE.Face3(5, 6, 7));
        //四个侧面
        geometry.faces.push(new THREE.Face3(1, 5, 6));
        geometry.faces.push(new THREE.Face3(6, 2, 1));
        geometry.faces.push(new THREE.Face3(2, 6, 7));
        geometry.faces.push(new THREE.Face3(7, 3, 2));
        geometry.faces.push(new THREE.Face3(3, 7, 0));
        geometry.faces.push(new THREE.Face3(7, 4, 0));
        geometry.faces.push(new THREE.Face3(0, 4, 5));
        geometry.faces.push(new THREE.Face3(0, 5, 1));

        var mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
        renderer.render(scene, camera);
    }
</script>
</html>